<!--
+----------------------------------------------------------------------
| 友得云客  - 开启房产营销新纪元
+----------------------------------------------------------------------
| Copyright (c) 2019~2023 优得（西安）信息科技有限公司版权所有
+----------------------------------------------------------------------
| Licensed 友得云客不是自由软件 未经允许不可移除相关版权
+----------------------------------------------------------------------
| Author: www.youdeyunke.com
+----------------------------------------------------------------------
-->
<template>
    <div class="outer" v-cloak>

        <el-form v-loading="loading" label-position="right" label-width="80px">

            <el-form label-position="right" v-if="item" label-width="120px">
                <el-form-item label="选择页面">
                    <!-- <el-input v-model="item.page" :disabled="item.is_system"></el-input> -->
                    <el-select v-model="currentPage" placeholder="请选择页面" style="width: 300px">
                        <el-option v-for="item in items" :key="item.page" :label="item.page" :value="item.page">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="标题[Title]">
                    <el-input v-model="item.title" type="textarea" :rows="5" style="width: 300px"></el-input>
                    <div style="font-size: 10px; color: #999">
                        <i class="el-icon-info"></i>
                        在厂房详情相关页，"{厂房标题}"将自动显示为该厂房的标题。
                    </div>
                </el-form-item>
                <el-form-item label="关键字[Keyword]">
                    <el-input v-model="item.keywords" type="textarea" :rows="5" style="width: 300px"></el-input>
                    <div style="font-size: 10px; color: #999">
                        <i class="el-icon-info"></i>
                        在厂房详情相关页，"{厂房标题}"将自动显示为该厂房的标题。
                    </div>
                </el-form-item>
                <el-form-item label="描述[Description]">
                    <el-input v-model="item.description" type="textarea" :rows="5" style="width: 300px"></el-input>
                    <div style="font-size: 10px; color: #999">
                        <i class="el-icon-info"></i>
                        在厂房详情相关页，"{厂房标题}"将自动显示为该厂房的标题。
                    </div>
                </el-form-item>

                <el-form-item>
                    <el-button size="mini" :loading="loading" :disabled="loading" type="primary" @click="submitHandle"
                        icon="el-icon-check">保存</el-button>
                </el-form-item>
            </el-form>

        </el-form>

        <!-- <div class="header">
                    <div class="part-left">
                    </div>
                    <div class="part-right">
                        <el-button icon="el-icon-refresh" size="small" type="default" :disabled="loading"
                            @click="loadData">刷新数据</el-button>
                        <el-button size="small" type="primary" icon="el-icon-plus"
                            @click="createHandle">新建设置</el-button>
                    </div>
                </div>
                <el-table :data="items" v-loading="loading" size="mini">
                    <el-table-column label="页面" prop="page" width="150px"></el-table-column>
                    <el-table-column label="标题" prop="title"></el-table-column>
                    <el-table-column label="关键字" prop="keywords"></el-table-column>
                    <el-table-column label="描述" prop="description"></el-table-column>
                    <el-table-column width="100">
                        <template slot-scope="scope">
                            <el-link type="primary" @click="settingHandle(scope.row)">设置</el-link>
                            <el-link type="danger" :disabled="scope.row.is_system" @click="deleteHandle(scope.row)">删除</el-link>
                        </template>
</el-table-column>
</el-table>
<el-dialog :visible.sync="showForm" width="500px" v-loading="loading" :destroy-on-close="true" title="SEO设置"
    :close-on-click-modal="false">
    <el-form label-position="right" v-if="item" label-width="120px">
        <el-form-item label="页面">
            <el-input v-model="item.page" :disabled="item.is_system"></el-input>
        </el-form-item>
        <el-form-item label="标题[Title]">
            <el-input v-model="item.title" type="textarea" :rows="5"></el-input>
            <div style="font-size: 10px; color: #999">
                <i class="el-icon-info"></i>
                在厂房详情相关页，"{厂房标题}"将自动显示为该厂房的标题。
            </div>
        </el-form-item>
        <el-form-item label="关键字[Keyword]">
            <el-input v-model="item.keywords" type="textarea" :rows="5"></el-input>
            <div style="font-size: 10px; color: #999">
                <i class="el-icon-info"></i>
                在厂房详情相关页，"{厂房标题}"将自动显示为该厂房的标题。
            </div>
        </el-form-item>
        <el-form-item label="描述[Description]">
            <el-input v-model="item.description" type="textarea" :rows="5"></el-input>
            <div style="font-size: 10px; color: #999">
                <i class="el-icon-info"></i>
                在厂房详情相关页，"{厂房标题}"将自动显示为该厂房的标题。
            </div>
        </el-form-item>
    </el-form>
    <div slot="footer">
        <el-button size="mini" :loading="loading" :disabled="loading" @click="cancleHandle"
            icon="el-icon-close">取消</el-button>
        <el-button size="mini" :loading="loading" :disabled="loading" type="primary" @click="submitHandle"
            icon="el-icon-check">保存</el-button>
    </div>
</el-dialog> -->


    </div>
</template>

<script>
import { getSeoConfigList, updateSeoConfig, deleteSeoConfig, createSeoConfig } from '@/api/seo-config'
import { updateWebInfo } from "@/api/myconfig";
export default {
    data() {
        return {
            items: [],
            item: null,
            showForm: false,
            loading: false,
            currentPage: '',
        };
    },
    props: {
    },
    components: {},

    mounted: function () {
        this.loadData()
    },

    computed: {
    },

    watch: {
        currentPage: function (val) {
            this.item = this.items.find(item => item.page == val)
        }
    },

    methods: {
        // cancleHandle: function () {
        //     this.loadData()
        //     this.showForm = false
        // },
        // settingHandle: function (item) {
        //     this.showForm = true
        //     this.item = item
        // },

        submitHandle: function () {
            var item = this.item
            if (!item.page) {
                this.$message.error('请输入页面')
                return false
            }
            if (!item.title) {
                this.$message.error('请输入标题')
                return false
            }
            if (!item.keywords) {
                this.$message.error('请输入关键字')
                return false
            }
            if (!item.description) {
                this.$message.error('请输入描述')
                return false
            }

            this.loading = true
            if (!item.id) {
                createSeoConfig(item).then((res) => {
                    this.loading = false
                    if (res.code != 0) {
                        return
                    }
                    this.$message.success("保存成功")

                    // this.loadData()
                    this.showForm = false
                })
                return
            }
            updateSeoConfig(item).then((res) => {
                this.loading = false
                if (res.code != 0) {
                    return
                }
                this.$message.success("保存成功")

                // this.loadData()
                this.showForm = false
            })
        },

        // createHandle() {
        //     this.item = {
        //         page: '',
        //         title: '',
        //         keywords: '',
        //         description: '',
        //     }
        //     this.showForm = true
        // },

        // deleteHandle(item) {
        //     var msg =
        //         "您确定要删除这条数据吗？";
        //     this.$confirm(msg, "删除确认").then((resp) => {
        //         this.loading = true;
        //         deleteSeoConfig(item.id).then((resp) => {
        //             this.loading = false;
        //             if (resp.status == 0) {
        //                 this.$message.success("已删除");
        //                 this.loadData();
        //             }
        //         });
        //     });
        // },

        loadData: function () {
            this.loading = true
            getSeoConfigList().then((res) => {
                this.loading = false
                this.items = res.data
                this.item = res.data[0]
                this.currentPage = res.data[0].page
            })
        },
    }
};
</script>

<style lang="scss" scoped>
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0px;
    border-bottom: 0.2px solid #ebeef5;

    .part-right {
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }

    .part-left {
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }

    .block {
        margin-right: 10px;
    }
}
</style>
